<template>
  <div class="baseMapWrapper">
    <!-- 地图组件 "-->
    <MapContainer
      class="baseMapWrapper"
      :id="mapId"
      :zoom="zoom"
      :minZoom="minZoom"
      :maxZoom="maxZoom"
      :projection="projection"
      :center="mapCenter"
      :extent="mapExtent"
      :baseMap="baseMap.length ? [baseMap[selectIndex]] : []"
      :layers="layers"
      ref="mapContainer"
    ></MapContainer>
    <!-- 鼠标悬浮地图实体 popop窗口，单例模式 -->
    <div class="ol-popup" id="popup">
      <slot />
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted, onBeforeUnmount } from 'vue-demi'
import MapContainer from './mapContainer'
import mapHelper from './mapHelper'
// import Utils from '../../_components/map/utils/publicUtils'
export default {
  props: {
    mapId: {
      type: String,
      required: true
    },
    // 注意mapCenter，zoom 与 extent只需要设置其一即可，建议设置下面的2个值，因为方便获取
    center: {
      type: Array,
      default: () => [116.41400, 39.91500]
    },
    // 注意要是设置了上面的值，要清除下面的值，因为下面的值（default: () => []）优先级高于上面的值
    extent: {
      type: Array,
      default: () => [],
      validator: function (val) {
        return val.length === 0 || val.length === 4
      }
    },
    zoom: {
      type: Number,
      default: 7
    },
    maxZoom: {
      type: Number,
      default: 18
    },
    minZoom: {
      type: Number,
      default: 6
    },
    projection: {
      type: String,
      default: 'EPSG:4326'
    },
    layers: {
      type: Array,
      default: () => []
    }
  },
  setup (props, ctx) {
    const state = reactive({
      baseMap: [
        {
          title: '政区图',
          zIndex: 1,
          visible: false,
          layers: [
            {
              source: 'XYZ',
              title: '天地图路网图',
              visible: true,
              zIndex: 1,
              isCanClick: false,
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=ab47b4591ab6e07e0530606eca973edd'
            },
            {
              source: 'XYZ',
              title: '天地图文字标注',
              visible: true,
              zIndex: 2,
              isCanClick: false,
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=ab47b4591ab6e07e0530606eca973edd'
            }
          ]
        }
      ],
      selectIndex: 0,
      mapCenter: props.center,
      mapExtent: props.extent,
      shadeOthersLayer: 'shadeOthersLayer'
    })

    // 地图遮罩层
    const shadeOthersByJson = (geoData) => {
      const fillColor = 'rgba(255, 255, 255, .8)'
      if (geoData) {
        mapHelper.shadeOthers(geoData, state.shadeOthersLayer, fillColor)
      }
    }
    const mapClick = (evt) => {
      ctx.emit('mapClick', evt)
    }

    // 地图移动完成事件
    const mapPointermove = (evt) => {
      ctx.emit('mapPointermove', evt)
    }

    onMounted(() => {
      // 地图鼠标点击要素事件
      window.map.on('click', (evt) => {
        mapClick(evt)
      })

      // 地图开始移动时事件
      window.map.on('pointermove', (evt) => {
        mapPointermove(evt)
      })
    })

    onUnmounted(() => {
      window.map.un('click', mapClick(), this)
      window.map.un('mapPointermove', mapPointermove, this)
    })

    return {
      ...toRefs(state),
      shadeOthersByJson
    }
  },
  components: {
    MapContainer
  }
}
</script>
<style lang="scss">
@import '../../css/map-popup.scss';
.baseMapWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
